<template>
    <div class="component-config-container" style="height: 100%;
    overflow-y: scroll;
    position: fixed;
    width: 390px;
    right: 0;
    padding-bottom: 100px;">
        <van-tabs v-model="$store.state.componentActiveTab">
            <van-tab v-if="this.$store.state.selectedComponent !== null && this.$store.state.selectedComponent.config !== undefined" title="组件配置">
                <component :is="this.$store.state.selectedComponent.config.type" :data="this.$store.state.selectedComponent.data">
                    <template #global-config>
                        <padding-config></padding-config>
                        <margin-config></margin-config>
                        <width-config></width-config>
                    </template>
                </component>
            </van-tab>
            <van-tab title="网页配置">
                <html-page-config></html-page-config>
            </van-tab>
        </van-tabs>
    </div>
</template>



<script>
    import {mapState} from 'vuex'
    import HtmlPageConfig from './../components/global-config/page/page-config'
    import PaddingConfig from './../components/global-config/component/padding'
    import MarginConfig from './../components/global-config/component/margin'
    import WidthConfig from './../components/global-config/component/width'

    export default {
        components: {
            PaddingConfig,
            MarginConfig,
            WidthConfig,
            HtmlPageConfig
        },
        data() {
            return {
                
            }
        },
        computed: {
            ...mapState([
                "selectedComponent"
            ])
        },
        watch:{

        },
    }
</script>